<template>
<div>
  <h1>This is Limit content----{{ $store.state.nickname }}--{{ nickname }}</h1>
  <Button style="padding:5px 10px ;margin:10px;text-align:left;" type="warning" @click="showMode2=true">添加文章</Button>
   <Table  :border="true" :loading="loading=flag1" :columns="columns1" :data="data1"></Table>
   <Modal
        v-model="showModel"
        footer-hide
        :title="bookInfo.title">
        <div v-html="content"></div>
        <p>作者：{{bookInfo.author}}</p>
        <p>时间：{{bookInfo.time}}</p>
        <p>地址：{{bookInfo.address}}</p>
    </Modal>
    <Modal
        v-model="showMode2"
        footer-hide
        :closable="false"
        :mask-closable='false'
        title="添加文章">
        <i-form ref:form-custom :model="formCustom" :rules="ruleCustom" :label-width="80">
          <Form-item label="文章名" prop="title">
              <i-input type="text" :value.sync="formCustom.title"></i-input>
          </Form-item>
          <Form-item label="作者" prop="author">
              <i-input type="text" :value.sync="formCustom.author"></i-input>
          </Form-item>
          <Form-item label="时间" prop="time">
              <i-input type="text" :value.sync="formCustom.time"></i-input>
          </Form-item>
          <Form-item label="地址" prop="address">
              <i-input type="text" :value.sync="formCustom.address"></i-input>
          </Form-item>
          <Form-item style="display:flex;justify-content:flex-end;">
              <i-button v-loading="addLoading" type="primary" @click="addArticle">提交</i-button>
              <i-button type="error" style="margin-left:5px;" @click="showMode2=false">取消</i-button>
          </Form-item>
      </i-form>
    </Modal>
</div>
</template>

<script>
import  { mapState } from "vuex"
export default {
  name:'Limit',
  data() {
    const validTitle=(rule, value, callback) =>{
      console.log(rule)
      if(value==""){
        callback(new Error('文章名为必填项'));
      }else{
        callback();
      }
    }
     const validAuthor=(rule, value, callback) =>{
      if(value==""){
        callback(new Error('作者为必填项'));
      }else{
        callback();
      }
    }
      const validTime=(rule, value, callback) =>{
      if(value==""){
        callback(new Error('时间为必填项'));
      }else{
        callback();
      }
    }
      const validAddress=(rule, value, callback) =>{
      if(value==""){
        callback(new Error('地址为必填项'));
      }else{
        callback();
      }
    }
    return {
      addLoading:false,
      formCustom:{
        title:'',
        author:'',
        time:'',
        address:''
      },
      ruleCustom:{
        title:[
          {validator:validTitle,trigger:'blur'}
        ],
        author:[
          {validator:validAuthor,trigger:'blur'}
        ],
        time:[
          {validator:validTime,trigger:'blur'}
        ],
        address:[
          {validator:validAddress,trigger:'blur'}
        ]
      },
      bookInfo:'',
      content:`<h1 style="color:red">嘻嘻嘻<h1>`,
      showModel:false,
      showMode2:false,
       flag1:false,
       columns1: [
          {
              title: '标号',
              key: 'id'
          },
          {
              title: '文章名',
              key: 'title'
          },
          {
              title: '作者',
              key: 'author'
          },
          {
            title:'时间',
            key:'time'
          },
           {
            title:'地址',
            key:'address'
          },
          {
            title:'操作',
            render:(h,params)=>{
              return h('div',[
                h('Button',{
                  props: {
                    type:'primary'
                  },
                  style:{
                    marginRight:'5px'
                  },
                  on:{
                    click:()=>{
                     this.$http.post('/articleInfo',{
                       id:params.row.id
                     }).then(res=>{
                       this.bookInfo=res.data;
                       
                     })
                      this.showModel=true;
                    }
                  }
                },'详情'),
                h('Button',{
                  props:{
                    type:'warning'
                  },
                  style:{
                    marginRight:'5px'
                  },
                  on:{
                    click:()=>{
                      this.$success('正处于测试阶段')
                    }
                  }
                },'编辑'),
                h('Button',{
                  props:{
                    type:'error'
                  },
                  on:{
                    click:()=>{
                      this.$fail('用户体验还需要提升')
                    }
                  }
                },'删除')
              ])
            }
          }
      ],
      data1: []
    }
  },
  methods:{
    addArticle(){
      this.addLoading=true;
      this.$http.post('/addArticle',{
        title:this.formCustom.title,
        author:this.formCustom.author,
        time:this.formCustom.time,
        address:this.formCustom.address,
      }).then(res=>{
        if(res.data.code===1){
          this.addLoading=false;
          this.$success('提交成功!');
        }else{
          this.$fail('表单验证失败!');
        }
      })
    },
    getArticle(){
      this.flag1=true;
      this.$http.get('/article').then(res=>{
        this.data1=res.data;
        this.flag1=false;
      })
    }
  },
  computed:{
    ...mapState(['nickname'])
  },
  created(){
    this.getArticle();
  }
}
</script>

<style>
  
</style>